<template>
  <div>
    <el-dialog :title="title" :fullscreen=true :close-on-click-modal="false" :visible.sync="visible" @close="OnClose">
      <el-row :gutter="10">
        <el-col :span="15">
          <el-card shadow="never" :body-style="contentViewHeight" class="uni-map-panel">
            <PointAddList ref="pointAddList" :floorId='inputForm.floor.id' type="parksapce"
              url='/smis/park/jfParkSpace/list' nameKey='spaceStart' nameKey1="spaceEnd" @onMapClick="onMapClick"
              @onDataClick="onDataClick" @dbClick="doSubmit()" @onParkList="onParkList"></PointAddList>
          </el-card>
        </el-col>
        <el-col :span="9">
          <el-card shadow="never" :body-style="contentViewHeight">
            <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"
              :disabled="method==='view'" label-width="120px">
              <el-row :gutter="15">
                <el-col :span="22">
                  <el-form-item label="区域" prop="parkArea.id" :rules="[
                       ]">
                    <GridSelect title="选择区域" labelName='name' labelValue='id' :value="inputForm.parkArea.id" :limit="1"
                      @getValue='(value) => {inputForm.parkArea.id=value}' :columns="[
                  {
                    prop: 'name',
                    label: '名称'
                  }
                  ]" :searchs="[
                  {
                    prop: 'name',
                    label: '名称'
                  }
                  ]" dataListUrl="/smis/park/jfParkArea/list" entityBeanName="jfParkArea"
                      queryEntityUrl="/smis/park/jfParkArea/queryById">
                    </GridSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="22" style="margin-bottom: 10px; width: 100%;text-align: center;">
                  <el-radio-group v-model="punctuateModel" size="mini">
                    <el-radio-button label="single">单个车位</el-radio-button>
                    <el-radio-button label="section">车位区间</el-radio-button>
                  </el-radio-group>
                </el-col>
                <el-col :span="22" v-if="punctuateModel === 'single'">
                  <el-form-item label="车位编号" prop="name" :rules="[
                        {required: true, message:'车位编号不能为空', trigger:'blur'}
                       ]">
                    <el-input v-model="inputForm.name" placeholder="请填写车位编号"></el-input>
                    <el-checkbox v-model="autoUp" style="position: absolute; right: 5px; ">自增</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="22" v-if="punctuateModel === 'section'">
                  <el-form-item label="开始编号" prop="spaceStart" :rules="[
                        {required: true, message:'开始编号不能为空', trigger:'blur'}
                       ]">
                    <el-input v-model="inputForm.spaceStart" placeholder="请填写开始编号"></el-input>
                    <el-checkbox v-model="autoUp" style="position: absolute; right: 5px; ">自增</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="22" v-if="punctuateModel === 'section'">
                  <el-form-item label="结束编号" prop="spaceEnd" :rules="[
                       ]">
                    <el-input v-model="inputForm.spaceEnd" placeholder="请填写结束编号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="车位类型" prop="type" :rules="[
                 ]">
                  <!--              <el-input v-model="inputForm.state" placeholder="请填写是否开启"     ></el-input>-->
                  <el-radio-group v-model="inputForm.type">
                    <el-radio v-for="item in this.$dictUtils.getDictList('car_type')" :label="item.value" :key="item.id">{{item.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item label="在模型上" prop="meshName"
                              :rules="[
                       ]">
                  <!--              <el-input v-model="inputForm.state" placeholder="请填写是否开启"     ></el-input>-->
                  <el-radio-group v-model="inputForm.meshName">
                    <el-radio v-for="item in this.$dictUtils.getDictList('yes_no')" :label="item.value" :key="item.id">{{item.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                   <el-form-item label="x" prop="x"
                       :rules="[
                         {required: true, message:'x不能为空', trigger:'blur'}
                        ]">
                    <el-input v-model="inputForm.x" placeholder="请填写x"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="y" prop="y" :rules="[
                         {required: true, message:'y不能为空', trigger:'blur'}
                        ]">
                    <el-input v-model="inputForm.y" placeholder="请填写y"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="z" prop="z" :rules="[
                         {required: true, message:'z不能为空', trigger:'blur'}
                        ]">
                    <el-input v-model="inputForm.z" placeholder="请填写z"></el-input>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                   <el-form-item label="地图模型" prop="meshName"
                       :rules="[
                        ]">
                     <el-input v-model="inputForm.meshName" placeholder="请填写地图模型"     ></el-input>
                  </el-form-item>
               </el-col> -->
              </el-row>
            </el-form>
            <el-button type="primary" @click="doSubmit()" class="uni-button" v-noMoreClick>添加(双击选中并提交)</el-button>

            <div class="uni-addlist-delete" v-if="selectItem.id !== ''">
              <div>当前选中了{{selectItem.name}}</div>
              <el-button type="danger" size="small" @click="doDelete()" v-noMoreClick>删除</el-button>
            </div>
            <!-- <div class="uni-foot">
              <el-button type="text"  @click="doUpdate()" v-noMoreClick>更新点位模型名称</el-button>
              <el-popover placement="top" width="240" trigger="hover">
                <div class="uni-popover-notice">可用通过<span>x、y坐标</span>,自动计算并保存<span>模型名称</span></div>
                <i slot="reference" class="el-icon-question"></i>
              </el-popover>
            </div> -->
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import PointAddList from '@/components/jfMap/pointAddList.vue'
  import GridSelect from '@/components/gridSelect'
  export default {
    data() {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        autoUp: false,
        punctuateModel: 'single', // section
        selectItem: {
          id: '',
          name: ''
        },
        inputForm: {
          id: '',
          name: '',
          x: '',
          y: '',
          z: '',
          meshName: '1',
          floor: {
            id: ''
          },
          parkArea: {
            id: ''
          },
          spaceStart: '',
          type: '1',
          spaceEnd: ''
        }
      }
    },
    components: {
      PointAddList,
      GridSelect
    },
    computed: {
      contentViewHeight() {
        let height = this.$store.state.common.documentClientHeight - 152
        return {
          height: height + 'px'
        }
      }
    },
    methods: {
      dbClick() {
        console.log("dbClick")
      },
      init(method, id, floorId) {
        this.method = method
        this.inputForm.id = id
        this.title = `批量添加`
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.inputForm.floor.id = floorId
          this.resetFields()
          this.$refs.pointAddList.resize();
          this.$refs.pointAddList.showFloor(floorId);
        })
      },
      onParkList(e) {
        this.$confirm('当前楼层为G1/G2格式地图, 可一键更新车位数据, 是否继续?', '提示', {
          confirmButtonText: '立即更新',
          cancelButtonText: '再想一想',
          type: 'warning'
        }).then(() => {
          this.updateParkSpaceList(e);
        }).catch(() => {

        });
      },
      updateParkSpaceList(e) {
        var floorData = e.floorData;
        var parkList = e.parkList || [];
        this.loading = true
        this.$http({
          url: `/smis/park/jfParkSpace/updateParkSpaceList`,
          method: 'post',
          data: {
            floorId: floorData.floorId,
            parkSpaceListStr: JSON.stringify(parkList)
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.$message.success(data.msg)
            this.$refs.pointAddList.refreshList()
            this.resetFields()
          }
          this.loading = false
        })
      },
      resetFields() {
        this.inputForm.id = ''
        if (this.punctuateModel == 'single') {
          this.inputForm.name = this.autoUp ? this.getAutoUpNumber(this.inputForm.name) : ''
        } else {
          this.inputForm.spaceStart = this.autoUp ? this.getAutoUpNumber(this.inputForm.spaceStart) : ''
        }
        this.inputForm.spaceEnd = ''
        this.inputForm.meshName = '1'
        this.inputForm.x = ''
        this.inputForm.y = ''
        this.inputForm.z = ''
      },
      getAutoUpNumber(code) {
        if (!code || code === "") {
          return ""
        }
        var list = code.split("")
        var numCode = ''
        for (var i = list.length - 1; i >= 0; i--) {
          var isnum = /^\d+$/.test(list[i]);
          if (isnum) {
            numCode = list[i] + numCode
          } else {
            break
          }
        }
        if (numCode === '') {
          return code
        }
        var prefix = code.substr(0, code.length - numCode.length)
        var newCode = (parseInt(numCode) + 1) + ''
        for (var len = newCode.length, i = 0; i < numCode.length - len; i++) {
          newCode = '0' + newCode
        }
        return prefix + newCode
      },
      // 表单提交
      doSubmit() {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/smis/park/jfParkSpace/save`,
              method: 'post',
              data: this.inputForm
            }).then(({
              data
            }) => {
              if (data && data.success) {
                this.$message.success(data.msg)
                this.$refs.pointAddList.refreshList()
                this.resetFields()
              }
              this.loading = false
            })
          }
        })
      },
      // 更新当前所有数据的模型名称
      doUpdate() {
        this.loading = true
        this.$http({
          url: '/smis/park/jfParkSpace/list',
          method: 'get',
          params: {
            'pageNo': 1,
            'pageSize': 100000,
            'orderBy': '',
            'floor': {
              id: this.inputForm.floor.id
            }
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            var dataList = data.page.list
            this.updateData(dataList)
          }
          this.loading = false
        })
      },
      updateData(dataList) {
        if (dataList.length === 0) {
          this.loading = false
          this.$message.success("处理完成")
          return
        }
        var item = dataList.shift();
        this.loading = true
        this.inputForm = item
        // this.inputForm.meshName = this.$refs.pointAddList.findGroupName(item)
        this.$http({
          url: `/smis/park/jfParkSpace/save`,
          method: 'post',
          data: this.inputForm
        }).then(({
          data
        }) => {
          this.updateData(dataList);
          this.loading = false
        })
      },
      doDelete() {
        this.loading = true
        this.$http({
          url: '/smis/park/jfParkSpace/delete',
          method: 'delete',
          params: {
            'ids': this.selectItem.id
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.$message.success(data.msg)
            this.$refs.pointAddList.refreshList()
            this.selectItem = {
              id: '',
              name: ''
            }
          }
          this.loading = false
        })
      },
      onMapClick(e) {
        this.inputForm.x = e.x
        this.inputForm.y = e.y
        this.inputForm.z = e.z
        // if(e.name.startsWith('jfdi') || e.name.startsWith('jflu') || e.name.startsWith('di') || e.name.startsWith('lu')) {
        //   this.$message({
        //     message: '当前选中的点，不在模型上',
        //     type: 'warning'
        //   });
        //   this.inputForm.meshName = ''
        // } else {
        //   this.inputForm.meshName = e.name
        // }
      },
      onDataClick(e) {
        this.selectItem = e
      },
      OnClose() {
        this.$emit('refreshDataList')
      }
    }
  }
</script>
<style scoped="scoped">
  .uni-foot {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 60px;
    text-align: right;
    padding: 0 10px;
    color: #096DD9;
  }

  .uni-foot .el-button--text {
    color: #096DD9;
    font-size: 12px;
  }

  .uni-popover-notice {
    font-size: 12px;

    span {
      color: #F5222D;
    }
  }
  .uni-button {
    float: right;
  }
</style>
